@import "compass/css3/font-face";
@import "compass/css3/transform";
@import "compass/css3/transition";

@include font-face("Roboto-Thin", font-files("../font/roboto/Roboto-Thin.ttf"), false, 100, normal);
@include font-face("Roboto-Light", font-files("../font/roboto/Roboto-Light.ttf"), false, 300, normal);
@include font-face("Roboto-Regular", font-files("../font/roboto/Roboto-Regular.ttf"), false, 400, normal);
@include font-face("Roboto-Medium", font-files("../font/roboto/Roboto-Medium.ttf"), false, 500, normal);
@include font-face("Roboto-Bold", font-files("../font/roboto/Roboto-Bold.ttf"), false, 700, normal);
@include font-face("Roboto-Black", font-files("../font/roboto/Roboto-Black.ttf"), false, 900, normal);

@include font-face("Roboto-ThinItalic", font-files("../font/roboto/Roboto-ThinItalic.ttf"), false, 100, italic);
@include font-face("Roboto-LightItalic", font-files("../font/roboto/Roboto-LightItalic.ttf"), false, 300, italic);
@include font-face("Roboto-Italic", font-files("../font/roboto/Roboto-Italic.ttf"), false, 400, italic);
@include font-face("Roboto-MediumItalic", font-files("../font/roboto/Roboto-MediumItalic.ttf"), false, 500, italic);
@include font-face("Roboto-BoldItalic", font-files("../font/roboto/Roboto-BoldItalic.ttf"), false, 700, italic);
@include font-face("Roboto-BlackItalic", font-files("../font/roboto/Roboto-BlackItalic.ttf"), false, 900, italic);

html, body, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd, ul, li, ol, img, input, select, div, table, tr, td, thead, tbody, p {
    border: 0;
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
    font-size: 12px;
    background-color: #ffffff;
    font-family: Roboto-Regular;
}
a {
    text-decoration:underline;
    color:#333;
}
a:hover, a:focus {
}

.shadow {
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.clearfix {
    *zoom: 1;
}
.clearfix:before,
.clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}
.clearfix:after {
    clear: both;
}
ul {
    list-style-type: none;
}

.float-left{ float:left;}
.float-right{ float:right;}
.wrapper{ width:100%;}
.black_color{ color:#000;}
.radius_all {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

.background_opacity{
    background:rgba(255, 255, 255, 0.7);
}

.color-light-grey{
  color:#4e5053;
  text-shadow: none;
}

#body-container {
  background: #eeeeee;
}
#content-container {
  margin-top: 0px;
  background: white;
}


.list-item {
    color: #4d5053;
}
.list-item-title {
    font-size: xx-large;
}
.list-item-sub-title {
    font-size: x-large;
}
.list-item-descr {
    font-size: larger;
}

.load-more {
    display: none;
    padding: 15px 0 0 0;
    text-align: center;
    font-family: Roboto-Light;
    font-size: 20px;
    line-height: 25px;
}

/* phone header */
.header {
    width:100%;
    height:50px;

    position:absolute;
    z-index: 100;
    top:0;
    text-align:center;
    background-color: white;
     .toolbar {
       .back{ position:absolute; left:20px; top: 10px;
         width: 35px;
         height: 35px;
         background-image: image-url("back.png");
         background-repeat: no-repeat;
       }
       .title {
         font-family: Roboto-Bold;
         font-size: 18px;
         line-height: 50px;
         color:#4e5053;
       }
       .icon{
         background-size: 30px;
       }
     }

}

.menu{
  position:absolute;
  width:100%;
  height:230px;
  text-align:center;
  z-index: 10;
  .menu-draw-outer {
    width: 100%;
    .menu-draw{
      margin: 0 auto;
      height:24px;
      width:36px;
      padding: 0;

      background: image-url("dropdown.png") no-repeat center;
      background-size: 36px 24px;
    }
  }
  @include transition(all 0.3s cubic-bezier(0,0,0,1));

  @include transform(translate(0, -150px, 0));
  @include transform(translate3d(0, -150px, 0));
  &.menu_show {
    @include transform(translate(0, 50px, 0));
    @include transform(translate3d(0, 50px, 0));
  }

  .background-opacity {
    height:200px;
    background: rgba(0, 0, 0, 0.5);
    .background-opacity-inner {
      background: rgba(246, 246, 246, 0.8);
    }
    .background-opacity-inner {
      height:200px;
    }
  }

  .menu-inner {
    margin: 0 auto;

    width: 100%;
    .menu-item{
      float: left;
      margin: 10px 0px;
      width: 33%;
      height: 70px;
      text-align: center;
      &.menu-item-current{
        color:#07538e;
      }
      .label{
        margin: 5px 0;
        font-size: larger;
      }

      .icon{
        margin: 5px auto;
        height:35px;
        width: 35px;
        background:cover no-repeat center;
        background-size: 35px ;
        &.icon-contactUs{
          background-image: image-url("contactUs.png");
        }
        &.icon-contactUs-h{
          background-image: image-url("contactUs_h.png");
        }

        &.icon-event{
          background-image: image-url("event.png");
        }
        &.icon-event-h{
          background-image: image-url("event_h.png");
        }

        &.icon-gallery{
          background-image: image-url("gallery.png");
        }
        &.icon-gallery-h{
          background-image: image-url("gallery_h.png");
        }

        &.icon-store{
          background-image: image-url("store.png");
        }
        &.icon-store-h{
          background-image: image-url("store_h.png");
        }

        &.icon-video{
          background-image: image-url("video.png");
        }
        &.icon-video-h{
          background-image: image-url("video_h.png");
        }

        &.icon-video{
          background-image: image-url("video.png");
        }
        &.icon-video-h{
          background-image: image-url("video_h.png");
        }

        &.icon-preference{
          background-image: image-url("preference.png");
        }
        &.icon-preference-h{
          background-image: image-url("preference_h.png");
        }
      }
    }
  }
}